<template>
  <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm"
      v-loading="loading">
      <el-form-item label="评价店铺：" prop="merchantId">
        <el-select v-model="ruleForm.merchantId" filterable placeholder="可输入筛选">
          <el-option v-for="item in evaluateStoreList" :key="item.id" :label="item.value" :value="item.id"> </el-option>
        </el-select>
        <!-- <MoreDataSelect :originalList="evaluateStoreList" v-model="ruleForm.merchantId" filterLabel="value" selectLabel="value" selectValue="id"></MoreDataSelect> -->
      </el-form-item>
      <el-form-item label="用户昵称：" prop="customerName">
        <el-input v-model="ruleForm.customerName" placeholder="请输入用户昵称" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入联系方式" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="用户头像：">
        <ImageUploadMore :limit="1" :fileSize="20" @successImg="getCustomerAvatar" :value="ruleForm.customerAvatar">
        </ImageUploadMore>
      </el-form-item>
      <el-form-item label="评价图片：">
        <ImageUploadMore :limit="9" :fileSize="20" @successImg="getImage" :value="ruleForm.image"></ImageUploadMore>
      </el-form-item>
      <el-form-item label="店铺环境：" prop="environmentPoints" class="evaluate">
        <el-checkbox-group v-model.number="ruleForm.environmentPoints" v-show="false"></el-checkbox-group>
        <el-rate v-model.number="ruleForm.environmentPoints"></el-rate>
      </el-form-item>
      <el-form-item label="服务态度：" prop="servicePoints" class="evaluate">
        <el-checkbox-group v-model.number="ruleForm.servicePoints" v-show="false"></el-checkbox-group>
        <el-rate v-model.number="ruleForm.servicePoints"></el-rate>
      </el-form-item>
      <el-form-item label="评价时间：" prop="createTime">
        <el-date-picker type="datetime" v-model="ruleForm.createTime" value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择评价时间"> </el-date-picker>
      </el-form-item>
      <el-form-item label="评价内容：">
        <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.content" maxlength="500"
          show-word-limit> </el-input>
      </el-form-item>
      <el-form-item label="是否显示：" prop="isShow">
        <el-switch v-model="ruleForm.isShow" active-value="1" inactive-value="2" active-text="显示" inactive-text="隐藏">
        </el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')" :loading="submitLoading" v-if="id==null">确 定</el-button>
      <el-button type="primary" @click="editForm('ruleForm')" :loading="submitLoading" v-if="id!=null">保 存</el-button>
    </span>
  </ex-dialog>
</template>
<script>
  import {
    normalShopSelect,
    addShopevaluate,
    getInfoShopevaluate,
    editShopevaluate
  } from "@/api/setting/merchantEvaluation";
  import Loading from "@/components/Loading/index";
  import MoreDataSelect from "@/components/MoreDataSelect/index";
  import Editor from '@/components/Editor';

  export default {
    components: {
      Loading,
      Editor,
      MoreDataSelect
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        title: '',
        loading: false,
        submitLoading: false,
        evaluateStoreList: [], //评价店铺列表
        ruleForm: {
          merchantId: "", //评价店铺
          customerName: "", //用户昵称
          customerAvatar: "", //用户头像
          image: "", //评价图片
          environmentPoints: 0, //店铺环境
          servicePoints: 0, //服务态度
          createTime: "", //评价时间
          isShow: '1', //是否显示
          content: '', //评价内容
          phone:'',//联系方式
        },
        rules: {
          merchantId: [{
            required: true,
            message: "请选择评价店铺",
            trigger: ['blur', 'change']
          }, ],
          customerName: [{
            required: true,
            message: "请输入用户昵称",
            trigger: ['blur', 'change']
          }, ],
          phone: [{
            required: true,
            message: "请输入联系方式",
            trigger: ['blur', 'change']
          }, ],
          environmentPoints: [
            // { required: true, message: "请选择店铺环境",trigger: ['blur', 'change']}, 
            {
              required: true,
              type: 'number',
              min: 1,
              max: 5,
              message: "请进行店铺环境评分",
              trigger: ['blur', 'change']
            },
          ],
          servicePoints: [{
            required: true,
            type: 'number',
            min: 1,
            max: 5,
            message: "请进行服务态度评分",
            trigger: ['blur', 'change']
          }, ],
          createTime: [{
            required: true,
            message: "请选择评价时间",
            trigger: ['blur', 'change']
          }, ],
          isShow: [{
            required: true,
            message: "请选择",
            trigger: ['blur', 'change']
          }, ],
        },
      };
    },
    computed: {},
    async created() {
      await this.getShopList()
      if (this.id != null) {
        this.title = '编辑评价'
        this.getInfo()
      }else{
        this.title = '新增评价'
      }
    },
    methods: {
      //获取店铺列表
      async getShopList() {
        var res = await normalShopSelect()
        this.evaluateStoreList = res.result
      },
      //  用户头像
      getCustomerAvatar(e) {
        console.log('e', e)
        if (e != '') {
          this.ruleForm.customerAvatar = e
        } else {
          this.ruleForm.customerAvatar = ''
        }
      },
      // 评价图片
      getImage(e) {
        if (e != '') {
          this.ruleForm.image = e.split(",")
        } else {
          this.ruleForm.image = []
        }
      },
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      getInfo() { //获取信息详情
        this.loading = true
        getInfoShopevaluate(this.id).then((res) => {
            this.ruleForm = res.result
            if (this.ruleForm.image.length > 0 || this.ruleForm.image != '') {
              this.ruleForm.image = JSON.parse(this.ruleForm.image)
            }
            setTimeout(() => {
              this.loading = false;
            }, 800)
          })
          .finally(() => {
            setTimeout(() => {
              this.loading = false;
            }, 800)
          });
      },
      submitForm(formName) {
        //创建确定
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = {
              ...this.ruleForm
            };
            if (params.image.length > 0 || params.image != '') {
              params.image = JSON.stringify(params.image).replace(/[\\]/g, '');
            }
            this.submitLoading = true
            addShopevaluate(params).then((res) => {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$emit('success')
                  this.handleClose()
                  this.submitLoading = false
                }, 1000);
              })
              .finally(() => {
                setTimeout(() => {
                  this.submitLoading = false;
                }, 800)
              });

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      editForm(formName) {
        //编辑确定
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = {
              id: this.id,
              ...this.ruleForm
            };
            if (params.image.length > 0 || params.image != '') {
              params.image = JSON.stringify(params.image).replace(/[\\]/g, '');
            }
            this.submitLoading = true
            editShopevaluate(params).then((res) => {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$emit('success')
                  this.handleClose()
                  this.submitLoading = false
                }, 1000);
              })
              .finally(() => {
                setTimeout(() => {
                  this.submitLoading = false;
                }, 800)
              });

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;

      .evaluate {
        font-size: 16px;

        .el-rate__icon {
          font-size: 25px;
          line-height: 32px;
        }
      }
    }

    ::v-deep .el-select {
      width: 50%;

      .el-input {
        width: 100%;
      }
    }

    ::v-deep .el-input {
      width: 50%;
    }
  }

</style>
